<template>
  <div class="home" @scroll="scroll">
    <cols-Header class="border fixed" v-show="show"></cols-Header>
    <div class="content1">
      <my-Swiper :banners="banners" autoplay></my-Swiper>
      <!-- 签到 -->
      <div class="sign">
        <ul>
          <li class="iconfont">
            <p>&#xe7cb;</p>签到
          </li>
          <li class="iconfont">
            <p>&#xe60b;</p>礼券 
          </li>
          <li class="iconfont">
            <p>&#xe545;</p>砍价
          </li>
          <li class="iconfont">
            <p>&#xe62f;</p>专栏
          </li>
        </ul>
      </div>
      <!-- 全民砍价 -->
      <div class="barga">
        <bargain content="全民砍价 >"></bargain>
      </div>
      <!-- 商品卡片 -->
      <div>
        <shop></shop>
      </div>
      <!-- 精选专题 -->
      <div class="sift">
        <bargain content="精选专题 >"></bargain>
      </div>
      <!-- 电影列表 -->
      <div class="movie">
        <movie></movie>
      </div>
      <!-- 人气推荐 -->
      <div>
        <bargain content="人气推荐 >"></bargain>
      </div>
      <!-- 推荐商品 -->
      <tuijian></tuijian>
    </div>
  </div>
</template> 

<script>
import { getBanners } from "../../utils/api/home";
import colsHeader from "@/components/colsHeader/colsHeader"; 
import mySwiper from "@/components/mySwiper/mySwiper";
import bargain from "@/components/bargain/bargain";
import shop from "@/components/shop/shop";
import movie from "@/components/movie/movie";
import tuijian from '@/components/tuijian/tuijian'

 
export default {
  name: "",
  data() {
    return { 
      show: false,
      banners: [],
      bargin: [],
    };
  },
  components: { mySwiper, colsHeader, bargain, shop, movie,tuijian },
  created() {
    // this.$loading.show('正在加载中');
    getBanners().then((res) => {
      this.banners = res;
      setTimeout(() => { 
        // this.$loading.hide(); 
      }, 1000);
    });
  },
  mounted() {},
  methods: {
    scroll(e) {
      this.show = e.target.scrollTop > 400 ? true : false;
    },
  },
};
</script>

<style lang='scss' scoped>
/deep/#mySwiper{
        background-color: #ffffff;
        width: 100%;
        ul {
            position: relative;
            height: 375px;
            li {
                overflow: hidden;
                float: left;
                height: 375px;
                img{
                   width: 100%;
                   height: 100%;
                }
            }
        }
    }
.home { 
  position: relative;
  height: 100%;
  background-color: #eee;
  overflow: auto;
  overflow-x: hidden;
  .content1 { 
    height: 1500px;
    .sign {
      position: absolute;
      top: 290px;
      width: 100%;
      height: 2rem;
      background-color: #fff;
      border-radius: 20% 20% 0 0;
      ul {
        display: flex;
        text-align: center;
        li {
          font-size: 0.4rem;
          flex-basis: 25%;
          padding-top: 0.6rem;
          p {
            margin-bottom: 0.2rem;
          }
        }
      }
    }
  }
  .barga {
    margin-top: 0.6rem;
  }
  .sift {
    margin-top: 0.2rem;
  }
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }
}
</style>